<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title> 天气预报-兵兵</title>
		<meta name="description" content="">
		<meta name="keywords" content="">

		<style>
			html,body{
				height: 100%;
			}
			body{
				background: url(./1.jpg) no-repeat center center/100%;
			}
			#box{
				width: 1200px;
				height: 500px;
				margin: 40px auto;
				/*background: red;*/
			}
			#box .top{
				height: 25px;
				line-height: 25px;
				padding-top: 25px;
			}
			#box .top #int{
				padding: 5px;
				margin-left: 50px;
			}
			#box .top #btn{
				padding: 5px 8px;
				border: none;
			}
			#list{
				height: 400px;
				padding: 25px 10px;
			}
			#list li{
				float: left;
				list-style: none;
				height: 90%;
				width: 155px;
				padding: 20px 0;
				margin: 0 5px;
				text-align: center;
				background: rgba(255,255,255,.5);
				border: 1px solid #fff;
			}
			#list li span{
				display: block;
				height: 25px;
				line-height: 25px;
				margin-bottom: 20px;
				font-size: 20px;
				font-weight: bold;
			}
			#list li img{
				width: 90%;
				height: auto;
			}
			#list li p{
				height: 25px;
				line-height: 25px;
				font-size: 18px;
			}
		</style>

	</head>
	<body>
	    <div id="box">
	    	<div class="top">
	    		<input type="text" id='int'>
	    		<button id='btn'>查询</button>
	    	</div>
	    	<ul id="list">
	    		<!-- <li>
	    			<span>周一</span>
	    			<img src="" alt="天气状况">
	    			<p>25℃</p>
	    			<p>微风3级</p>
	    		</li> -->
	    	</ul>
	    </div>
	    <script src="./js/ajax.js"></script>
	    <script>
	    	var oInt = document.getElementById('int'),
	    		oBtn = document.getElementById('btn'),
	    		oList = document.getElementById('list');

	    	oBtn.addEventListener('click',function(){
	    		var val = oInt.value.replace(/\s/g,'');
	    		if(val === ''){
	    			alert('请输入地名！！！');
	    		}else{ 		
					ajax({
					    type: 'post',
					    url: 'http://route.showapi.com/9-2',
					    dataType: 'json',
					    data: {
					        "showapi_timestamp": formatterDateTime(),
					        "showapi_appid": '69513', //这里需要改成自己的appid
					        "showapi_sign": '25e02f41b50a42d984b14ad7cad6b05c',  //这里需要改成自己的应用的密钥secret
					        "area":val,
					        "needMoreDay":"1"

					    },
					    success: function(result) {
					        console.log(result) //console变量在ie低版本下不能用
					        var arr = [];
					        for (var key in result.showapi_res_body) {
					        	var num = key.match(/^f(\d*)/);

					        	if(num){
					        		arr[num[1] - 1] = result.showapi_res_body[key];
					        	}
					        }
					        createDay(arr);
					    }
					});
	    		}
	    	});
	    	function formatterDateTime() {
			  var date=new Date()
			  var month=date.getMonth() + 1
			        var datetime = date.getFullYear()
			                + ""// "年"
			                + (month >= 10 ? month : "0"+ month)
			                + ""// "月"
			                + (date.getDate() < 10 ? "0" + date.getDate() : date
			                        .getDate())
			                + ""
			                + (date.getHours() < 10 ? "0" + date.getHours() : date
			                        .getHours())
			                + ""
			                + (date.getMinutes() < 10 ? "0" + date.getMinutes() : date
			                        .getMinutes())
			                + ""
			                + (date.getSeconds() < 10 ? "0" + date.getSeconds() : date
			                        .getSeconds());
			        return datetime;
			    }


			    function createDay(arr){
			    	var week = ['周一','周二','周三','周四','周五','周六','周日'];
			    
			    	oList.innerHTML = '';
			    	
			    	for(var i = 0; i < arr.length; i++){
			    		var oLi = document.createElement('li');
			    		var	dom = [
					    			'<span>' + week[arr[i].weekday - 1] + '</span>',
					    			'<img src="' + arr[i].day_weather_pic + '" alt="天气状况">',
					    			'<p>' + arr[i].day_air_temperature + '℃</p>',
					    			'<p>' + arr[i].day_weather + '</p>'
			    			];
			    		oLi.innerHTML =  dom.join('');
			    		oList.appendChild(oLi);
			    	}
			    }

	    </script>
	</body>
</html>